<template>
  <div class="shipfilter-container">
    <div class="filter-item">
      <div class="title">
        <span>船舶类型</span>
      </div>
      <div class="content">
        <span
          v-for="item in shipTypeList"
          :key="item.code"
          :class="{ selected: item.selected }"
          @click="switchSelectShipType(item)"
          >{{ item.label }}</span
        >
      </div>
    </div>
    <div class="filter-item">
      <div class="title">
        <span>船舶长度</span>
      </div>
      <div v-if="isLengthCustom" class="content-custom">
        <el-input-number
          v-model="customLengthMin"
          :controls="false"
          :min="0"
          size="mini"
          :precision="0"
          style="width: 70px"
        ></el-input-number>
        <div>-</div>
        <el-input-number
          v-model="customLengthMax"
          :controls="false"
          :min="0"
          size="mini"
          :precision="0"
          style="width: 70px"
        ></el-input-number>
        <div>
          <el-button type="primary" plain size="mini" @click="customLengthOk"
            >确定</el-button
          >
        </div>
        <div class="custom-cancel" @click="cancelCustomLength">取消</div>
      </div>
      <div v-else class="content">
        <span
          v-for="item in shipLengthList"
          :key="item.code"
          :class="{ selected: item.selected }"
          @click="switchSelectShipLength(item)"
          >{{ item.label }}</span
        >
        <span @click="doCustomLength"> 自定义长度</span>
      </div>
    </div>
    <div class="filter-item">
      <div class="title">
        <span>船舶状态</span>
      </div>
      <div class="content">
        <span
          v-for="item in shipStatusList"
          :key="item.code"
          :class="{ selected: item.selected }"
          @click="switchSelectShipStatus(item)"
          >{{ item.label }}</span
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shipTypeList: [],
      shipLengthList: [],
      shipStatusList: [],

      isLengthCustom: false,
      customLengthMin: undefined,
      customLengthMax: undefined,
    };
  },
  mounted() {
    this.dealFilter();
  },
  destroy() {},
  methods: {
    async dealFilter() {
      // 船舶类型筛选
      const shipTypeList = this.$store.state.shipfilter.shipTypeList.map(
        (val) => {
          return {
            label: val.label,
            code: val.code,
            selected: false,
          };
        }
      );
      const shipTypeFilter = await this.$store.dispatch(
        "shipfilter/getShipTypeFilter"
      );
      shipTypeList.forEach((element) => {
        if (shipTypeFilter.includes(element.code)) {
          element.selected = true;
        }
      });
      this.shipTypeList = shipTypeList;

      // 船舶长度筛选
      const shipLengthList = this.$store.state.shipfilter.shipLengthList.map(
        (val) => {
          return {
            label: val.label,
            code: val.code,
            selected: false,
          };
        }
      );
      const shipLengthFilter = await this.$store.dispatch(
        "shipfilter/getShipLengthFilter"
      );
      if (
        shipLengthFilter &&
        shipLengthFilter.custom === false &&
        shipLengthFilter.lengths
      ) {
        shipLengthList.forEach((element) => {
          if (shipLengthFilter.lengths.includes(element.code)) {
            element.selected = true;
          }
        });
      }

      if (shipLengthFilter.custom) {
        this.isLengthCustom = true;
        this.customLengthMin = shipLengthFilter.customMin;
        this.customLengthMax = shipLengthFilter.customMax;
      }

      this.shipLengthList = shipLengthList;

      // 船舶状态筛选
      const shipStatusList = this.$store.state.shipfilter.shipStatusList.map(
        (val) => {
          return {
            label: val.label,
            code: val.code,
            selected: false,
          };
        }
      );

      const shipStatusFilter = await this.$store.dispatch(
        "shipfilter/getShipStatusFilter"
      );
      shipStatusList.forEach((element) => {
        if (shipStatusFilter.includes(element.code)) {
          element.selected = true;
        }
      });
      this.shipStatusList = shipStatusList;
    },
    // 切换选择状态
    switchSelect(item) {
      if (item.selected) {
        item.selected = false;
      } else {
        item.selected = true;
      }
    },
    async switchSelectShipType(item) {
      this.switchSelect(item);
      const typeList = this.shipTypeList.filter((val) => {
        return val.selected;
      });
      const selectedCodes = typeList.map((val) => {
        return val.code;
      });
      await this.$store.dispatch("shipfilter/setShipTypeFilter", selectedCodes);
      this.$emit("filter-change");
    },
    async switchSelectShipLength(item) {
      this.switchSelect(item);
      const lengthList = this.shipLengthList.filter((val) => {
        return val.selected;
      });
      const selectedCodes = lengthList.map((val) => {
        return val.code;
      });
      this.$store.dispatch("shipfilter/setShipLengthFilter", {
        custom: false,
        lengths: selectedCodes,
      });
      this.$emit("filter-change");
    },
    async switchSelectShipStatus(item) {
      this.switchSelect(item);
      const statusList = this.shipStatusList.filter((val) => {
        return val.selected;
      });
      const selectedCodes = statusList.map((val) => {
        return val.code;
      });
      this.$store.dispatch("shipfilter/setShipStatusFilter", selectedCodes);
      this.$emit("filter-change");
    },
    doCustomLength() {
      this.isLengthCustom = true;
    },
    async cancelCustomLength() {
      this.isLengthCustom = false;
      this.customLengthMin = undefined;
      this.customLengthMax = undefined;

      this.shipLengthList.forEach((element) => {
        element.selected = true;
      });
      await this.$store.dispatch("shipfilter/setShipLengthFilter", {
        custom: false,
        lengths: this.shipLengthList.map((val) => {
          return val.code;
        }),
      });
      this.$emit("filter-change");
    },
    async customLengthOk() {
      if (this.customLengthMin >= 0 && this.customLengthMax >= 0) {
        if (this.customLengthMin > this.customLengthMax) {
          this.$message.warning("最小长度必须小于最大长度！");
          return;
        }
      }
      if (
        !this.customLengthMin &&
        this.customLengthMin != 0 &&
        !this.customLengthMax &&
        this.customLengthMax != 0
      ) {
        this.$message.warning("请输入长度范围！");
        return;
      }
      if (this.customLengthMax === 0) {
        this.$message.warning("最大长度必须大于零！");
        return;
      }

      await this.$store.dispatch("shipfilter/setShipLengthFilter", {
        custom: this.isLengthCustom,
        customMin: this.customLengthMin,
        customMax: this.customLengthMax,
      });
      this.$emit("filter-change");
    },
  },
};
</script>

<style lang="scss" scoped>
.shipfilter-container {
  padding: 10px;
  .filter-item {
    margin-bottom: 18px;
    .title {
      font-size: 14px;
      font-weight: bold;
      color: #333333;
      margin-bottom: 10px;
    }
    .content {
      display: grid;
      grid-template-columns: 80px 80px 80px;
      grid-column-gap: 20px;
      grid-row-gap: 12px;
      color: #333333;
      text-align: center;
      span {
        width: 80px;
        height: 30px;
        background: #ffffff;
        border-radius: 3px;
        border: 1px solid #004aaa;

        font-size: 14px;
        font-weight: 400;
        color: #004aaa;
        line-height: 27px;

        cursor: pointer;
      }

      .selected {
        background: #004aaa;
        color: #ffffff;
      }
    }
    .content-custom {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      div {
        margin-right: 10px;
      }
      .custom-cancel {
        color: #4a91f1;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>
